<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05_axios中取消请求_CancelToken</title>
    <script src="js/axios.min.js"></script>
</head>
<body>
<button id="btn1">点我获取测试数据</button>
<button id="btn2">点我取消请求</button>
<script type="text/javascript">
    const btn1 = document.getElementById('btn1')
    const btn2 = document.getElementById('btn2')

    // CancelToken：能为一次请求“打标识”
    const {CancelToken} = axios
    let cancel

    btn1.onclick = () => {
        axios({
            url: 'http://localhost:5000/test2',
            params: {delay: 3000},
            cancelToken: new CancelToken(c => { // c：是一个函数，调用 c 就可以关闭本次请求
              cancel = c
            })
        }).then(
            response => {
                console.log('成功了', response.data)
            },
            error => {
                console.log('失败了', error)
            }
        )
    }

    btn2.onclick = () => {
        cancel()
    }
</script>
</body>
</html>
